<template>
    <div class="detail">
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="shop-head" :style="{ backgroundImage: `url(${shopinfo.info && shopinfo.info.poi_back_pic_url})` }">
            <!-- &&运算符在这里是做判断，当有店铺信息的时候才会渲染相应的背景图片； -->
            <img class="logo" :src="shopinfo.info && shopinfo.info.picUrl" alt="">
            <span class="name">{{ shopinfo.info && shopinfo.info.name }}</span>
            <span></span>
        </div>
        <!-- 分类及商品列表 -->
        <div class="goodlist">
            <div class="left">
                <!-- 分类列表 -->
                <div @click="currentIndex = index" class="cate" v-for="(item, index) in shopinfo.taglist" :key="index">
                    {{ item.name }}</div>
            </div>
            <div class="right">
                <!-- 商品列表 -->
                <div class="good" v-for="(item, index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist"
                    :key="index">
                    <div class="img-box">
                        <img :src="item.picture" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{ item.name }}</div>
                        <div class="price">{{ item.min_price }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { shop_shopinfo } from '../api'
import { useRouter, useRoute } from 'vue-router'


var $router = useRouter();
var $route = useRoute();
var currentIndex = 0;
var shopinfo = ref({});

onMounted(() => {
    //请求店铺列表
    shop_shopinfo({ id: $route.query.id }).then((res) => {
        if (res.data.code == 200) {
            shopinfo.value = res.data.shopinfo;
        } else {
            $router.go(-1);//如果该店铺的详情页不存在，就回退到上一个历史记录
        }
    })
})
var onClickLeft = () => {
    $router.go(-1)
}

</script>

<style scoped>
.shop-head {
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 50px 20px;
}

.shop-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.shop-head .name {
    color: white;
    font-size: 18px;
}

.shop-head .iconfont {
    color: white;
    font-size: 18px;
}

.goodlist {
    display: flex;
}

.goodlist .left {
    width: 100px;
    line-height: 40px;
}

.goodlist .right {
    flex: 1;
}

.goodlist .right .good {
    display: flex;
}

.goodlist .right .img-box {
    width: 100px;
    margin-right: 10px;
}

.goodlist .right .img-box img {
    width: 100%;

}

.goodlist .right .text {
    flex: 1;
}
</style>